<template>
  <div class="comment">
    <van-nav-bar
      title="评论"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    />
    <div class="dakuang">
      <div class="text-one">{{ shuzi }}<span>评论</span></div>
      <div class="neiron" v-for="(itmes, index) in detailPage" :key="index">
        <div class="img">
          <img :src="itmes.avatar" alt="" />
        </div>
        <div class="shang">
          {{ itmes.author }}
          <div class="right" @click="show = true">
            <van-icon name="ellipsis" />
            <van-action-sheet
              v-model="show"
              :actions="actions"
              @select="onSelect"
            />
          </div>
        </div>
        <div class="zhong">{{ itmes.content }}</div>
        <div class="xia">
          {{ shuju[index] }}
          <div class="right" @click="collect()">
            <van-icon color="#777" name="chat-o" />
          </div>
          <div class="right" @click="collectOne(index)">
            <img class="imgs" src="../assets/dz-one.png" alt="" />
          </div>
        </div>
        <hr />
      </div>
    </div>
    <div class="fei"></div>
    <div class="shuru">
      <div class="shuru-one">
        <input class="ipt" type="text" value="" placeholder="请输入！！！" />
        <button @click="btn">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Comment",
  data() {
    return {
      id: "",
      detailPage: [],
      shuju: [],
      shuzi: 0,
      show: false,
      activeInde: true,
      actions: [{ name: "复制" }, { name: "举报" }],
      shujutwo: {
        author: "维柯丁桃桃",
        avatar:
          "https://pica.zhimg.com/v2-4e3c501462efb8bbb5b4a01e4265ed5a_l.jpg?source=8673f162",
        content: "看了下今天日报配图，6篇文章，4篇配图是外国人。🐶",
        id: 34003135,
        likes: 0,
        time: 1648370014,
      },
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getHotProductOne(this.id);
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name + "成功");
    },
    collect() {
      Toast({ type: "primary", message: "没有接口，尚未开发" });
      // this.$router.push({ name: "SignIn" });
    },
    collectOne(index) {
      if (this.activeInde) {
        let zimg = document.querySelectorAll(".imgs")[index];
        zimg.src = require("../assets/dz-two.png");
        this.activeInde = false;
        Toast({ type: "primary", message: "点赞成功 ！！" });
        return;
      } else {
        let zimg = document.querySelectorAll(".imgs")[index];
        zimg.src = require("../assets/dz-one.png");
        this.activeInde = true;
        Toast({ type: "primary", message: "取消成功 ！！" });
        return;
      }
    },
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    getHotProductOne(id) {
      //发起请求
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url:
          "https://apis.netstart.cn/zhihudaily/story/" + id + "/short-comments",
        //如果get请求, 请求参数需要写在params字段中
        // params: {
        //   page: this.shu,
        // },
      })
        .then((result) => {
          if (result.status == 200) {
            this.detailPage = result.data.comments;
            this.shuzi = this.detailPage.length;
            for (let i = 0; i < this.detailPage.length; i++) {
              let date = this.detailPage[i].time;
              date = new Date(date * 1000);
              let year = date.getFullYear(); // 年
              let month = date.getMonth() + 1; // 月, 月份是从0开始算的 0 - 11
              let data = date.getDate(); // 日

              let hour = date.getHours(); // 时
              let minute = date.getMinutes(); // 分
              let second = date.getSeconds(); // 秒
              // 优化一下，一般在显示 月 日 时分秒的时候我们习惯按照两位的方式去显示；如果数字是一位的我们补齐一个0即可
              month = month < 10 ? "0" + month : month;
              date = date < 10 ? "0" + date : date;
              hour = hour < 10 ? "0" + hour : hour;
              minute = minute < 10 ? "0" + minute : minute;
              let munder =
                year +
                "-" +
                month +
                "-" +
                data +
                "    " +
                hour +
                ":" +
                minute +
                ":" +
                second;
              this.shuju.push(munder);
            }
          }
        })
        .catch((err) => {});
    },
    btn() {
      let myDate = new Date();
      let Year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let Month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let Datetwo = myDate.getDate(); //获取当前日(1-31)
      let mytime = myDate.toLocaleTimeString(); //获取当前时间
      Month = Month < 10 ? "0" + Month : Month;
      Datetwo = Datetwo < 10 ? "0" + Datetwo : Datetwo;
      let datadata = Year + "-" + Month + "-" + Datetwo + "    " + mytime;
      this.shujutwo;
      let ipt = document.querySelector(".ipt");
      if (ipt.value === "") {
        return;
      }
      let value = ipt.value;
      this.shujutwo.content = value;
      this.detailPage.unshift(this.shujutwo);
      this.shuju.unshift(datadata);
      ipt.value = "";
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep .van-icon-chat-o:before {
  font-size: 17px;
}
::v-deep .van-nav-bar__placeholder {
  border-bottom: 1px solid rgb(170, 170, 170);
}
.right {
  float: right;
  margin-right: 10px;
  img {
    width: 17px;
  }
}
.dakuang {
  width: 100%;
  height: 100%;
  background-color: white;
  .text-one {
    width: calc(100% - 30px);
    height: 40px;
    padding: 0 15px;
    font-size: 16px;
    line-height: 40px;
    span {
      margin-left: 10px;
    }
  }
  .neiron {
    width: calc(100%-20px);
    height: calc(100%-10px);
    padding: 5px 10px;
    .img {
      width: 50px;
      height: 50px;
      float: left;
      border-radius: 50px;
      img {
        width: 90%;
        border-radius: 50px;
      }
    }
    .shang {
      width: calc(100% - 60px);
      float: right;
      font-size: 16px;
      margin: 5px 0;
    }
    .zhong {
      width: calc(100% - 75px);
      padding-right: 25px;
      margin: 5px 0;
      float: right;
      font-size: 13px;
    }
    .xia {
      width: calc(100% - 60px);
      height: 17px;
      padding: 5px 20px;
      line-height: 17px;
      float: right;
    }
    hr {
      clear: both;
    }
  }
}
.fei {
  width: 100%;
  height: 45px;
}
.shuru {
  width: 100%;
  height: 55px;
  background-color: rgb(235, 235, 235);
  position: fixed;
  bottom: 0;
  .shuru-one {
    width: 100%;
    height: 100%;
    position: relative;
    input {
      width: 70%;
      height: 35px;
      border: 0;
      cursor: pointer;
      position: absolute;
      top: 10px;
      left: 15px;
      padding: 0 10px;
      border-radius: 8px 0 0 8px;
    }
    button {
      width: 20%;
      height: 35px;
      border: 0;
      cursor: pointer;
      background-color: rgb(89, 255, 255);
      position: absolute;
      top: 10px;
      left: 280px;
      border-radius: 0 8px 8px 0;
    }
  }
}
</style>